$(function () {
    init_classfier_list();
    classfier_confirm();
});

function init_classfier_list() { // 获取分类器
    const classfier = (results, title, keyword) => { // 填充分类器
        results.forEach((val, _idx, _arr) => {
            // console.log(val[keyword]);
            $new_radio = `<input type="radio" name="${title}" value="${val[keyword]}" class="${title}-radio-button"><label style="padding-left: 5px; vertical-align: middle;">${val[keyword]}</label><br>`;
            $('#' + title + '-classfier-form').append($new_radio);
        });
    };
    $.ajax({ 
        url: '/get-shop-classfier',
        type: 'get',
        dataType: 'json',
        success: function (data) {
            if (data.status) {
                classfier(data.result, 'color', 'color');
                classfier(data.result, 'size', 'size');
                // classfier_filter();
            } else {
                alert('商品分类器获取失败');
            }
        }
    });
}

function all_filter() {
    location.reload();
}

function classfier_filter() {
    $('.color-radio-button').click(function () {
        // console.log($(this));
        var keyword = $(this).attr('value');
        var target_list = $.extend(true, target_list, base_items);
        console.log(target_list.children())
        for (var idx = 0; idx < target_list.children().length; idx += 1) {
            var sub_val = target_list.children('div').eq(idx).eq(0);
            // console.log(sub_val.attr('s-color'));
            if (sub_val.attr('s-color') != keyword) { 
                console.log(sub_val.attr('s-color'));
                // sub_val.remove();
                target_list.children('div').eq(idx).remove(); 
            }
        }
        // $('#shop-body').children().remove();
        console.log(target_list);
        $('#shop-body').append(target_list);
        // console.log($('#shop-body'));
    });
    $('.size-radio-button').click(function () {
        var keyword = $(this).attr('value');
        var target_list = $.extend(true, target_list, base_items);
        for (var idx = 0; idx < target_list.length; idx += 1) {
            var sub_val = target_list.eq(idx).children('div').eq(0);
            if (sub_val.attr('s-size') != keyword) sub_val.remove();
        }
        $('#shop-body').empty();
        $('#shop-body').append(target_list);
    });
}

function classfier_confirm() {
    $('#classfier-confirm').click(() => {
        color_point = $('input[name="color"]:checked').val();
        size_point = $('input[name="size"]:checked').val();
        console.log(color_point, size_point);
        init_shop_list(color_point, size_point);
    })
}